<template>
  <div class="PlayListPage" ref="PlayListPage">
    <div
      class="PlayListPage-mask"
      ref="PlayListPageMask"
      @touchmove.prevent
      @mousewheel.prevent
    />

    <div class="PlayListPageBody" ref="PlayListPageBody">
      <!-- 头部 -->
      <div class="PlayListPage-head">
        <template v-if="PlayListType == 0">
          <a> 顺序播放({{ $store.state.playList.playNowList.length }}首) </a>
        </template>
        <template v-if="PlayListType == 1">
          <a> 最近播放({{ $store.state.playList.playHistory.length }}首) </a>
        </template>
      </div>
      <Swipe :loop="false" @change="setListTitle" :show-indicators="false">
        <SwipeItem>
          <!-- 歌曲列表 -->
          <div class="PlayListPage-list">
            <!-- <div
              
            > -->
            <CloudMusicSongplaylistelement
              :id="item"
              :clickPlay="playSong"
              :removeClick="deleteThisSong"
              v-for="(item, index) in $store.state.playList.playNowList"
              :key="index"
              :class="{
                PlayListPage_list_active:
                  item == $store.state.playerState.playData.songId,
              }"
            />
            <!-- </div> -->
          </div>
        </SwipeItem>
        <SwipeItem
          ><div class="PlayListPage-list">
            <CloudMusicSongplaylistelement
              :id="item"
              :clickPlay="playSong"
              :removeClick="deleteThisSong"
              v-for="(item, index) in $store.state.playList.playHistory"
              :key="index"
              :class="{
                PlayListPage_list_active:
                  item == $store.state.playerState.playData.songId,
              }"
            /></div
        ></SwipeItem>
      </Swipe>
      <!-- 指示器 -->
      <div>
        <div class="playList-indicators">
          <svg
            viewBox="0 0 100 100"
            style="height: 0.5em; width: 0.5em"
            :fill="0 == PlayListType ? 'gray' : 'lightgray'"
          >
            <circle cx="50" cy="50" r="40" />
          </svg>
          <svg
            viewBox="0 0 100 100"
            style="height: 0.5em; width: 0.5em"
            :fill="1 == PlayListType ? 'gray' : 'lightgray'"
          >
            <circle cx="50" cy="50" r="40" />
          </svg>
        </div>
      </div>
      <!-- 列表底部 -->
      <div class="PlayListPage-bottom" @click="closeWindow()">
        <span>关闭</span>
      </div>
    </div>
  </div>
</template>
<style>
.PlayListPage {
  height: 100vh;
  width: 100vw;
  z-index: 10;
  position: fixed;
  margin-left: -5vw;
  /* bottom: -100vh; */
}
.PlayListPage-mask {
  /* background: rgba(0, 0, 0, 0.6); */
  transition: all 0.6s;
  z-index: 10;
  height: 100vh;
  position: static;
}
.PlayListPage > div:nth-child(2) {
  background: white;
  z-index: 11;
  bottom: -70vh;
  position: absolute;
  transition: all 0.4s;
  width: 100vw;
}
.PlayListPage-head {
  border-bottom: 1px solid rgb(223, 222, 222);
  line-height: 3em;
}
.PlayListPage-head > a {
  font-weight: bold;
  font-size: 1em;
  letter-spacing: 0.1em;
}
.PlayListPage-list {
  margin-top: 0.5em;
  max-height: 50vh;
  overflow: scroll;
}
.PlayListPage-list > div {
  line-height: 3em;
  display: flex;
  justify-content: space-between;
  padding-left: 1em;
  transition: all 0.2s;
}
.PlayListPageBody {
  transition: all 0.2s;
}

.PlayListPage-list > div:not(:first-child) {
  border-top: 1px solid rgb(223, 222, 222);
}
.PlayListPage-list > div:active {
  background: rgb(219, 221, 223);
}
.PlayListPage-list > div > span:last-child {
  padding-left: 1em;
  padding-right: 1em;
}
/* 歌手名称 */
.PlayListPage-list > div > div > span:last-child {
  color: gray;
  font-size: 0.8em;
}
.song-type-sq::before {
  content: "SQ";
  color: rgb(112, 212, 112);
}
.song-type-sq {
  border-radius: 0.4em;
  border: 1px solid rgb(112, 212, 112);
  zoom: 0.7;
  font-size: 0.5em;
  padding: 0.1em 0.3em;
  margin-left: 0.8em;
  margin-right: 0.2em;
}
/* 关闭按钮 */
.PlayListPage-bottom {
  border-top: 1px solid rgb(223, 222, 222);
  line-height: 4em;
  font-size: 1.01em;
  font-weight: 500;
}
.PlayListPage_list_active > div > span {
  color: rgb(82, 172, 82);
}
.PlayListPage-list > div.PlayListPage_list_active > div > span:last-child {
  color: rgb(82, 172, 82);
}

.playList-indicators > svg {
  padding: 0 0.1em;
}
</style>
<script>
import { Swipe, SwipeItem } from "vant";
import CloudMusicSongplaylistelement from "./songPlayListElement.vue";
export default {
  components: {
    Swipe,
    SwipeItem,
    CloudMusicSongplaylistelement,
  },

  data() {
    return {
      PlayListType: 0,
    };
  },
  methods: {
    /**
     * 获取歌曲名称
     */
    getNameById(id) {
      return this.$store.state.DataCacheMap.simpleData[id]["title"];
    },
    /**
     * 获取歌手名称
     */
    getSingerById(id) {
      return this.$store.state.DataCacheMap.simpleData[id]["singer"];
    },
    /**
     * 判断歌曲是否收费
     */
    songIsTrial(id) {
      // console.log("歌曲检查",id,this.$store.state.DataCacheMap.simpleData[id]["fee"],(this.$store.state.DataCacheMap.simpleData[id]["fee"]==1));
      return this.$store.state.DataCacheMap.simpleData[id]["fee"] == 1;
    },
    playSong(id) {
      console.log("投放id", id);
      this.$store.dispatch("serviceSetPlayData", { id });
    },
    deleteThisSong(id, index) {
      setTimeout(() => {
        this.$store.state.playList.playNowList.splice(index, 1);
      }, 500);
    },
    closeWindow() {
      this.$refs.PlayListPageMask.style = "background: rgba(0, 0, 0, 0);";
      this.$refs.PlayListPageBody.style = "";
      setTimeout(() => {
        this.$refs.PlayListPage.style = "display:none";
        this.$destroy();
        console.log("已经销毁啦");
      }, 500);
    },
    openWindow() {
      //   this.$refs.PlayListPage.style = "bottom:-0em";
      //   this.$refs.PlayListPageMask.style = "";
      this.$refs.PlayListPageBody.style = "bottom: 0em;";
      this.$refs.PlayListPageMask.setAttribute(
        "style",
        "background: rgba(0, 0, 0, 0.6);backdrop-filter: blur(1px);"
      );
      this.$refs.PlayListPage.style = "bottom:-0em";
    },
    setListTitle(index) {
      this.PlayListType = index;
    },
  },
  mounted() {
    // this.$refs.PlayListPage.style["bottom"] = 0;
    let that = this;
    setTimeout(function () {
      that.openWindow();
    }, 10);

    // console.log("mounted")
  },
};
</script>